3 files changed, 55 insertions, 0 deletions
diff --git a/src/routes/blog/[id=int]/+page.server.ts b/src/routes/blog/[id=int]/+page.server.ts
new file mode 100644
index 0000000..e295257
--- /dev/null
+++ b/src/routes/blog/[id=int]/+page.server.ts
@@ -0,0 +1,12 @@
+import { parsePost } from '$/lib/blog/Post.svelte'
+import rawPosts from '../posts.js';
+
+const posts = Promise.all(Object.entries(rawPosts).map(async post => [post[0], parsePost(await post[1])] as const));
+const postMap = posts.then(posts => posts.map(post => [post[1].metadata.id.toString(), {
+  metadata: post[1].metadata,
+  filename: post[0],
+}])).then(v => new Map(v));
+
+export const load = async (req) => ({
+  post: (await postMap).get(req.params.id),
+});
diff --git a/src/routes/blog/[id=int]/+page.svelte b/src/routes/blog/[id=int]/+page.svelte
new file mode 100644
index 0000000..84d33ef
--- /dev/null
+++ b/src/routes/blog/[id=int]/+page.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { replaceState } from '$app/navigation';
+  import { onMount, tick } from 'svelte';
+
+  import type { PageProps } from './$types';
+  import { resolve } from '$app/paths';
+  import { page } from '$app/state';
+  import { forceTrailingSlash } from '$/lib';
+  import Post from '$/lib/blog/Post.svelte';
+
+  let { data }: PageProps = $props();
+
+  let route = $derived(
+    forceTrailingSlash(
+      resolve('/blog/[id=int]-[slug]', {
+        id: data.post.metadata.id.toString(),
+        slug: data.post.metadata.slug,
+      }),
+    ),
+  );
+
+  onMount(() => {
+    tick().then(() => replaceState(route, page.state));
+  });
+</script>
+
+<svelte:head>
+  <link rel="canonical" href={new URL(route, page.url).href} />
+</svelte:head>
+
+<Post post={data.post} filename={data.filename} />
diff --git a/src/routes/blog/[id=int]/+page.ts b/src/routes/blog/[id=int]/+page.ts
new file mode 100644
index 0000000..ea2803f
--- /dev/null
+++ b/src/routes/blog/[id=int]/+page.ts
@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+import posts from '../dynamic-posts.js';
+
+export const load = async ({ data }) => {
+  const filename = data.post?.filename;
+  if (!filename) throw error(404, 'Post not found.')
+  const post = (await posts[filename]());
+  return {
+    post,
+    filename,
+  }
+}